.headerbar {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 0.88rem;
    line-height: 0.88rem;
    background: #fff;
    font-size: 0.28rem;
}

.headerbar .headerbar-left {
    text-align: left;
    width: 1.76rem;
    height: 0.88rem;
    font-size: 0;
}

.headerbar .headerbar-left .navigation {
    display: inline-block;
    width: 0.88rem;
    height: 0.88rem;
    text-align: center;
}

.headerbar .headerbar-left .navigation .icon-zuojiantou {
    font-size: 0.4rem;
    color: #232628;
}

.headerbar-center {
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
}

.headerbar-center .headerbar-content {
    font-size: 0.32rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.headerbar-right {
    text-align: right;
    width: 1.76rem;
    height: 0.88rem;
    font-size: 0;
    .navigation {
        display: inline-block;
        width: 0.88rem;
        height: 0.88rem;
        text-align: center;
        i {
            font-size: .4rem/* 20/50 */
            ;
            color: rgb(35, 38, 40);
        }
    }
    .headerbar-menu-toggle {
        position: relative;
    }
}

.headerbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: .16rem/* 8/50 */
    ;
    z-index: 9;
    background: #fff;
    border: 1px solid #E9ECF0;
    border-radius: .02rem/* 1/50 */
    ;
    box-shadow: 0 4px 12px 0 #E9ECF0;
}

// .active {
//     display: none;
// }
.headerbar-menu::before {
    content: "";
    position: absolute;
    top: -.08rem/* 4/50 */
    ;
    right: .24rem/* 12/50 */
    ;
    width: .08rem/* 4/50 */
    ;
    height: .08rem/* 4/50 */
    ;
    background: #fff;
    border-top: 1px solid #E9ECF0;
    border-left: 1px solid #E9ECF0;
    transform: rotate(45deg);
}

.headerbar-menu-item {
    height: .96rem/* 48/50 */
    ;
    text-align: left;
    line-height: .88rem/* 44/50 */
    ;
    .nei {
        display: flex;
        padding: 0 .24rem/* 12/50 */
        ;
        font-size: 14px;
        color: #232628;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .iconfont {
            font-size: .4rem/* 20/50 */
            ;
        }
        span {
            font-size: 14px;
            color: #232628;
            margin-left: .12rem/* 6/50 */
            ;
        }
    }
}

.hualogo {
    display: flex;
    justify-content: center;
    height: .48rem/* 24/50 */
    ;
    text-align: center;
    margin-top: .68rem/* 34/50 */
    ;
    img {
        width: 3.66rem/* 183/50 */
        ;
        height: .48rem/* 24/50 */
        ;
    }
}

.quick {
    margin: 1.6rem/* 80/50 */
    auto .4rem/* 20/50 */
    ;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 89.4%;
    .quick-tips {
        color: rgba(0, 0, 0, 0.2);
        width: 2.8rem/* 140/50 */
        ;
        margin: -.22rem/* 11/50 */
        auto .32rem/* 16/50 */
        ;
        background: #fff;
        text-align: center;
        font-size: .28rem/* 14/50 */
        ;
    }
}

.quick-login {
    display: flex;
    height: .48rem/* 24/50 */
    ;
    .quick-login-item {
        display: flex;
        flex: 1;
        height: 100%;
        line-height: .48rem/* 24/50 */
        ;
        text-align: center;
        align-content: center;
        justify-content: center;
        .iconfont {
            color: #1CACEA;
            font-size: .48rem/* 24/50 */
            ;
            vertical-align: middle;
        }
        span {
            margin-left: .16rem/* 8/50 */
            ;
            font-size: 13px;
        }
    }
}

body {
    color: #232628;
}

.login,
.reg {
    margin-top: .62rem/* 31/50 */
    ;
    padding: 0 .4rem/* 20/50 */
    ;
}

.login-item {
    border-bottom: .02rem/* 1/50 */
    #e9ecf0 solid;
    .login-item-title {
        font-size: .26rem/* 13/50 */
        ;
    }
    .login-item-info {
        margin-top: .08rem/* 4/50 */
        ;
        display: flex;
        align-items: center;
        .dl-zhanghao {
            flex: 1;
            font-size: .28rem/* 14/50 */
            ;
            outline: none;
            border: none;
            padding: .14rem/* 7/50 */
            0 .14rem/* 7/50 */
            .04rem/* 2/50 */
            ;
            color: #232628;
        }
        .dl-mima {
            flex: 1;
            font-size: .28rem/* 14/50 */
            ;
            outline: none;
            border: none;
            padding: .14rem/* 7/50 */
            0 .14rem/* 7/50 */
            .04rem/* 2/50 */
            ;
            color: #232628;
        }
    }
}

.to-login,
.login-by-password {
    cursor: pointer;
    margin-top: .82rem/* 41/50 */
    ;
    height: .84rem/* 42/50 */
    ;
    line-height: .84rem/* 42/50 */
    ;
    color: #fff;
    font-size: .34rem/* 17/50 */
    ;
    border-radius: .42rem/* 21/50 */
    ;
    width: 6.7rem/* 335/50 */
    ;
    text-align: center;
    border: .02rem/* 1/50 */
    solid #ff734c;
    outline: none;
    // transition: 0.3s;
    margin: 0 auto;
}

button.active {
    background: #ff734c;
}

.ffff.active {
    display: block;
}

.ffff {
    display: none;
}

.login-by-password,
.to-login {
    // margin-left: .4rem/* 20/50 */
    // ;
    cursor: pointer;
    margin-top: .6rem/* 30/50 */
    ;
    color: #71797f;
    font-size: .34rem/* 17/50 */
    ;
    text-align: center;
}

.login-item+.login-item {
    margin-top: .5rem/* 25/50 */
    ;
}

.butss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}